<template>
  <div class="shopping-box">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      right-text="清空购物车"
      @click-right="clear"
      @click-left="$router.back()"
    />
    <!-- 内容 -->
    <main>
      <article>
        <van-swipe-cell v-for="(item, index) in cartList" :key="index">
          <div class="content">
            <!-- 商品信息 -->
            <div class="left">
              <!-- 勾选 -->
              <van-checkbox
                v-model="item.flag"
                @click="checkbox(item.cartid, item.flag)"
              ></van-checkbox>
            </div>
            <van-card
              :price="item.originprice"
              :title="item.proname"
              :thumb="item.img1"
            >
              <template #num>
                <van-stepper
                  :value="item.num"
                  theme="round"
                  button-size="22"
                  disable-input
                  @plus="plus(++item.num, item.cartid)"
                  @minus="plus(--item.num, item.cartid)"
                />
              </template>
            </van-card>
          </div>
          <template #right>
            <van-button
              square
              type="danger"
              text="删除"
              @click="del(item.cartid)"
            />
          </template>
        </van-swipe-cell>
      </article>

      <!-- 购物车空状态 -->
      <van-empty description="购物车空空如也" v-show="show_flag">
        <van-button
          round
          type="danger"
          class="bottom-button"
          @click="goShopping"
          >立即购物</van-button
        >
      </van-empty>

      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
        {{ msg }}
      </van-divider>
      <recommend-list></recommend-list>
    </main>
    <!--底部 -->
    <footer-vue v-show="show_flag"></footer-vue>
    <van-submit-bar :price="totalPrice" button-text="去结算" @submit="onSubmit" v-show="!show_flag">
      <van-checkbox v-model="checked" @click="selectall">全选</van-checkbox>
      <!-- <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template> -->
    </van-submit-bar>
  </div>
</template>

<script>
import FooterVue from "../components/FooterCom.vue";
import RecommendList from "../components/RecommendList.vue";
export default {
  name: "ShoppingCart",
  components: {
    FooterVue,
    RecommendList,
  },
  computed: {
    totalPrice() {
      return (
        this.cartList.reduce((pre, item) => {
          if (item.flag) {
            pre += item.originprice * item.num;
          }
          return pre;
        }, 0) * 100
      );
    },
  },
  data() {
    return {
      checked: "",
      token: "",
      value: "",
      msg: "快点来看看",
      show_flag: true,
      cartList: [],
    };
  },
  created() {
    this.token = sessionStorage.getItem("token");
    let userid = sessionStorage.getItem("userid");

    this.$http({
      url: "cart/list",
      method: "post",
      headers: {
        token: this.token,
      },
      data: {
        userid,
      },
    }).then((res) => {
      if (res.data.code == "200") {
        this.show_flag = false;
        this.cartList = res.data.data;
        this.checked = res.data.data.every((item) => item.flag == true);
      }
    });
  },
  methods: {
    clear() {
      this.show_flag = true
      this.cartList = [];
      this.$http({
        url: "cart/removeall",
        method: "post",
        headers: { token: this.token },
        data: {
          userid: sessionStorage.getItem("userid"),
        },
      });
    },
    del(cartid) {
      this.cartList = this.cartList.filter((item) => item.cartid != cartid);
      this.$http({
        url: "cart/remove",
        method: "post",
        headers: { token: this.token },
        data: { cartid },
      });
    },
    selectall() {
      this.$http({
        url: "cart/selectall",
        method: "post",
        headers: { token: this.token },
        data: {
          userid: sessionStorage.getItem("userid"),
          type: this.checked,
        },
      });

      // 操作数据
      this.cartList.forEach((item) => {
        item.flag = this.checked;
      });
    },
    onSubmit() {
      console.log(11111);
      this.$router.push('order')
    },
    checkbox(cartid, flag) {
      this.checked = this.cartList.every((item) => item.flag == true);

      this.$http({
        url: "cart/selectone",
        method: "post",
        headers: { token: this.token },
        data: {
          cartid,
          flag,
        },
      });
    },
    plus(num, cartid) {
      this.cartList.find((item) => item.cartid == cartid).num = num;
      this.$http({
        url: "cart/updatenum",
        method: "post",
        headers: { token: this.token },
        data: {
          cartid,
          num,
        },
      });
    },
    goShopping() {
      this.$router.push("/");
    },
  },
};
</script>

<style scoped>
.shopping-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.shopping-box main {
  flex: 1;
  background: #efefef;
  overflow: auto;
}

.bottom-button {
  display: block;
  width: 5.5rem;
  height: 2.75rem;
  background: #ee0a24;
  border-radius: 1.875rem;
  color: white;
  text-align: center;
  line-height: 2.75rem;
  font-size: 0.875rem;
}
article {
  background: white;
}
.content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.content .van-card {
  flex: 1;
  margin: 0;
  max-width: 91%;
  background: white;
}
.content .van-button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.content .van-button__content {
  font-size: 30px;
}
.van-swipe-cell__right .van-button--danger {
  height: 100%;
}
</style>